<template>
  <div class="nav-menu">
    <div class="logo" v-if="props_collapseer">
      <img src="~@/assets/img/logo.png" alt="" />
    </div>
    <el-menu
      class="el-menu-vertical"
      mode="vertical"
      background-color="#121b35"
      text-color="#18d1ec"
      active-text-color="#67eeb7"
      :collapse="collapse"
      :collapse-transition="false"
    >
      <template v-for="item in userMenus" :key="item.id">
        <!--      二级菜单-->
        <template v-if="item.type === 1">
          <el-sub-menu :index="String(item.id)">
            <template #title>
              <el-icon v-if="item.icon === 'el-icon-chat-line-round'">
                <component is="ChatLineRound" />
              </el-icon>
              <el-icon v-if="item.icon != 'el-icon-chat-line-round'">
                <component :is="icons(item.icon)" />
              </el-icon>

              <span>{{ item.name }}</span>
            </template>
            <template v-for="subite in item.children" :key="subite.id">
              <el-menu-item :index="String(subite.id)">
                <!--                <i v-if="subite.icon" :class="subite.icon"></i>-->
                <el-icon v-if="subite.icon">
                  <component :is="icons(subite.icon)" />
                </el-icon>
                <span>{{ subite.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <!--        一级菜单-->
        <template v-else-if="item.type === 2">
          <el-menu-item>
            <i v-if="item.icon" :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, defineProps } from "vue";
import { useStore } from "vuex";

const store = useStore();
const userMenus = store.state.login.userMenus;
console.log(userMenus);
const icons = computed(() => (aa: string) => {
  const RE = /el-icon-(\w+)/;
  const resules: any = aa.match(RE);
  return resules[1];
});
//边栏的展开与关闭
const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const props_collapse = defineProps(["collapse"]);
const props_collapseer = ref(props_collapse);
console.log("测试props", props_collapse);
</script>
<style scoped lang="less">
.nav-menu {
  .logo {
    width: 100%;
    height: 100px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100px;
    }
  }
  .el-menu {
    border-right: 0 !important;
  }
}
</style>
